<template>
  <div class="form main-content">
    <el-row :gutter="24" class="mb-10">
      <el-col :span="3">
        <span class="checkbox-title">是否登记人员其他类型信息：</span>
      </el-col>
      <el-col :span="12">
        <el-checkbox-group
          v-model="otherTabsChoice"
          @change="handleCheckboxChange"
          size="medium"
        >
          <el-checkbox-button
            v-for="otherChoice in otherTabsChoicesList"
            :label="otherChoice"
            :key="otherChoice"
            >{{ otherChoice }}</el-checkbox-button
          >
        </el-checkbox-group>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-form
          :rules="rules"
          ref="baseInfoForm"
          :model="baseInfoForm"
          label-width="120px"
        >
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="人员编号:" prop="uid">
                <el-input v-model="baseInfoForm.uid"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="档案号:" prop="fileId">
                <el-input v-model="baseInfoForm.fileId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="姓名:" prop="userName">
                <el-input v-model="baseInfoForm.userName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="英文姓名:" prop="enName">
                <el-input v-model="baseInfoForm.enName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="性别:" prop="sex">
                <el-radio v-model="baseInfoForm.sex" label="1">男</el-radio>
                <el-radio v-model="baseInfoForm.sex" label="2">女</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="区划地址:" prop="regionalAddress">
                <el-select
                  style="width: 100%"
                  v-model="baseInfoForm.regionalAddress"
                >
                  <el-option label="北京市" value="bj"></el-option>
                  <el-option label="天津市" value="tj"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="是否专职:" prop="isFullTime">
                <el-select
                  style="width: 100%"
                  v-model="baseInfoForm.isFullTime"
                >
                  <el-option label="专职" value="1"></el-option>
                  <el-option label="兼职" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="合作单位:" prop="cooperationUnit">
                <el-input v-model="baseInfoForm.cooperationUnit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="是否退休:" prop="isRetirement">
                <el-select
                  style="width: 100%"
                  v-model="baseInfoForm.isRetirement"
                >
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="分公司人员:" prop="branchPersonnel">
                <el-select
                  style="width: 100%"
                  v-model="baseInfoForm.branchPersonnel"
                >
                  <el-option label="天津分公司" value="tjCompany"></el-option>
                  <el-option label="北京分公司" value="bjCompany"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="证件类型:" prop="idType">
                <el-select style="width: 100%" v-model="baseInfoForm.idType">
                  <el-option label="身份证" value="id"></el-option>
                  <el-option label="护照" value="passport"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="开户银行:" prop="depositBank">
                <el-input v-model="baseInfoForm.depositBank"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="证件号码:" prop="idNo">
                <el-input v-model="baseInfoForm.idNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="开户账号:" prop="accountBank">
                <el-input v-model="baseInfoForm.accountBank"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="出生日期:" prop="birthDate">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="baseInfoForm.birthDate"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="所在部门:" prop="department">
                <el-select
                  style="width: 100%"
                  v-model="baseInfoForm.department"
                >
                  <el-option label="人事部" value="hr"></el-option>
                  <el-option label="财务部" value="money"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="联系手机:" prop="phone">
                <el-input v-model="baseInfoForm.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="电子邮件:" prop="email">
                <el-input v-model="baseInfoForm.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="固定手机:" prop="fixedPhone">
                <el-input v-model="baseInfoForm.fixedPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="联系传真:" prop="fax">
                <el-input v-model="baseInfoForm.fax"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="紧急联系人:" prop="emergencyContact">
                <el-input v-model="baseInfoForm.emergencyContact"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="紧急电话:" prop="emergencyCall">
                <el-input v-model="baseInfoForm.emergencyCall"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="通讯邮编:" prop="postcode">
                <el-input v-model="baseInfoForm.postcode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="易记码:" prop="mnemonics">
                ZXC
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="13">
              <el-form-item label="通讯地址:" prop="mailAddress">
                <el-input v-model="baseInfoForm.mailAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="13">
              <el-form-item label="工作单位名称:" prop="workUnitName">
                <el-input v-model="baseInfoForm.workUnitName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="13">
              <el-form-item label="备注信息:" prop="mark">
                <el-input
                  type="textarea"
                  v-model="baseInfoForm.mark"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="second">
        <el-form ref="otherInfoForm" :model="otherInfoForm" label-width="120px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="人员性质:" prop="nature">
                <el-checkbox-group v-model="otherInfoForm.nature">
                  <el-checkbox
                    v-for="item in natureList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="人员职称:" prop="jobTitle">
                <el-select style="width: 100%" v-model="otherInfoForm.jobTitle">
                  <el-option label="工程师" value="common"></el-option>
                  <el-option label="助理工程师" value="assistant"></el-option>
                  <el-option label="高级工程师" value="advanced"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="办公人员:" prop="officeStaff">
                <el-radio v-model="otherInfoForm.officeStaff" label="1"
                  >是</el-radio
                >
                <el-radio v-model="otherInfoForm.officeStaff" label="0"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="合同开始日期:" prop="contractStart">
                <el-date-picker
                  v-model="otherInfoForm.contractStart"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同结束日期:" prop="contractEnd">
                <el-date-picker
                  v-model="otherInfoForm.contractEnd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="协议开始日期:" prop="protocolStart">
                <el-date-picker
                  v-model="otherInfoForm.protocolStart"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="协议结束日期:" prop="protocolEnd">
                <el-date-picker
                  v-model="otherInfoForm.protocolEnd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="入职日期:" prop="onboarding">
                <el-date-picker
                  v-model="otherInfoForm.onboarding"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="离职日期:" prop="resign">
                <el-date-picker
                  v-model="otherInfoForm.resign"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="社保登记:" prop="social">
                <el-select style="width: 100%" v-model="otherInfoForm.social">
                  <el-option label="公司社保" value="company"></el-option>
                  <el-option label="原籍社保" value="origin"></el-option>
                  <el-option label="没有社保" value="none"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="在聘情况:" prop="employment">
                <el-radio v-model="otherInfoForm.employment" label="1"
                  >是</el-radio
                >
                <el-radio v-model="otherInfoForm.employment" label="0"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="人员等级:" prop="level">
                <el-select style="width: 100%" v-model="otherInfoForm.level">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否涉密:" prop="confidential">
                <el-radio v-model="otherInfoForm.confidential" label="1"
                  >是</el-radio
                >
                <el-radio v-model="otherInfoForm.confidential" label="0"
                  >否</el-radio
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="CCAA档案号:" prop="ca">
                <el-input v-model="otherInfoForm.ca"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人员行程排序:" prop="userRank">
                <el-select style="width: 100%" v-model="otherInfoForm.userRank">
                  <el-option label="专职审核员" value="full"></el-option>
                  <el-option label="兼职审核员" value="part"></el-option>
                  <el-option label="助理审核员" value="assistant"></el-option>
                  <el-option label="审核员" value="common"></el-option>
                  <el-option label="技术专家" value="technical"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="教育经历" name="third" v-if="ifChooseEdu">
        <hr-educate @transimitEduData="handleDataFromEducate" />
      </el-tab-pane>
      <el-tab-pane label="培训经历" name="fourth" v-if="ifChooseTrain">
        <hr-training @transimitTrainingData="handleDataFromTraining" />
      </el-tab-pane>
      <el-tab-pane label="工作经历" name="fifth" v-if="ifChooseWork">
        <hr-work @transimitWorkData="handleDataFromWork" />
      </el-tab-pane>
      <el-tab-pane
        label="文档信息"
        name="sixth"
        v-if="ifChooseDoc"
      ></el-tab-pane>
      <el-tab-pane
        label="头像/签名"
        name="seventh"
        v-if="ifChooseAvatar"
      ></el-tab-pane>
    </el-tabs>
    <el-row :gutter="24" class="mt-20">
      <el-col :offset="11">
        <el-button type="primary" @click="onSubmit"
          >保存并登记所有信息</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  addPersonnel,
  addEducation,
  addTraining,
  addWork,
} from "../../api/personnel";
import Educate from "./components/educate";
import Training from "./components/training";
import Work from "./components/work";
export default {
  name: "HrRegistration",
  components: {
    "hr-educate": Educate,
    "hr-training": Training,
    "hr-work": Work,
  },
  watch: {
    ifChooseEdu: {
      handler(newValue, oldValue) {
        this.activeName =
          newValue === false && oldValue === true && this.activeName === "third"
            ? "first"
            : newValue === true && oldValue === false
            ? "third"
            : this.activeName;
      },
    },
    ifChooseTrain: {
      handler(newValue, oldValue) {
        this.activeName =
          newValue === false &&
          oldValue === true &&
          this.activeName === "fourth"
            ? "first"
            : newValue === true && oldValue === false
            ? "fourth"
            : this.activeName;
      },
    },
    ifChooseWork: {
      handler(newValue, oldValue) {
        this.activeName =
          newValue === false && oldValue === true && this.activeName === "fifth"
            ? "first"
            : newValue === true && oldValue === false
            ? "fifth"
            : this.activeName;
      },
    },
    ifChooseDoc: {
      handler(newValue, oldValue) {
        this.activeName =
          newValue === false && oldValue === true && this.activeName === "sixth"
            ? "first"
            : newValue === true && oldValue === false
            ? "sixth"
            : this.activeName;
      },
    },
    ifChooseAvatar: {
      handler(newValue, oldValue) {
        this.activeName =
          newValue === false &&
          oldValue === true &&
          this.activeName === "seventh"
            ? "first"
            : newValue === true && oldValue === false
            ? "seventh"
            : this.activeName;
      },
    },
  },
  data() {
    return {
      baseInfoForm: {
        //基本信息
        uid: "",
        fileId: "",
        userName: "",
        enName: "",
        sex: "",
        regionalAddress: "",
        isFullTime: "",
        cooperationUnit: "",
        isRetirement: "",
        branchPersonnel: "",
        idType: "",
        depositBank: "",
        idNo: "",
        accountBank: "",
        birthDate: "",
        department: "",
        phone: "",
        email: "",
        fixedPhone: "",
        fax: "",
        emergencyContact: "",
        emergencyCall: "",
        postcode: "",
        mnemonics: "",
        mailAddress: "",
        workUnitName: "",
        mark: "",
      },
      //其他信息
      otherInfoForm: {
        nature: [],
        jobTitle: "",
        officeStaff: "1",
        contractStart: "",
        contractEnd: "",
        protocolStart: "",
        protocolEnd: "",
        onboarding: "",
        resign: "",
        social: "",
        employment: "",
        level: "",
        confidential: "",
        ca: "",
        userRank: "",
      },
      natureList: [
        {
          value: "1",
          label: "合同评审人员",
        },
        {
          value: "2",
          label: "审核方案策划人员/委派人员",
        },
        {
          value: "3",
          label: "专业评定人员",
        },
        {
          value: "4",
          label: "审核员",
        },
        {
          value: "5",
          label: "专家",
        },
        {
          value: "6",
          label: "阅卷老师",
        },
        {
          value: "7",
          label: "认证决定人员",
        },
      ],
      rules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        regionalAddress: [
          { required: true, message: "请输入区域地址", trigger: "blur" },
        ],
        isFullTime: [
          { required: true, message: "请选择是否专职", trigger: "change" },
        ],
        idType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        birthDate: [
          { required: true, message: "请输入出生日期", trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入联系手机", trigger: "blur" }],
      },
      activeName: "first",
      otherTabsChoice: [],
      otherTabsChoicesList: [
        "教育经历",
        "培训经历",
        "工作经历",
        "文档信息",
        "头像/签名",
      ],
      educateData: [],
      trainingData: [],
      workData: [],
      docData: [],
      avatarData: [],
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    ifChooseEdu() {
      return this.otherTabsChoice.includes("教育经历");
    },
    ifChooseTrain() {
      return this.otherTabsChoice.includes("培训经历");
    },
    ifChooseWork() {
      return this.otherTabsChoice.includes("工作经历");
    },
    ifChooseDoc() {
      return this.otherTabsChoice.includes("文档信息");
    },
    ifChooseAvatar() {
      return this.otherTabsChoice.includes("头像/签名");
    },
  },
  methods: {
    handleCheckboxChange(data) {
      return data;
    },
    handleEdit() {},
    async handleSubmit() {
      const baseInfoRes = await addPersonnel({
        ...this.baseInfoForm,
        ...this.otherInfoForm,
      });
      const { code, data, message } = baseInfoRes?.data;
      if (code === 0) {
        this.$message({
          message,
          type: "success",
        });
      }
      if (this.ifChooseEdu) {
        if (data && data.id) {
          const eduData = this.educateData.map((obj) => {
            return { personnelId: data.id, userName: data.userName, ...obj };
          });
          const eduInfoRes = await addEducation(eduData);
          const { code, message } = eduInfoRes?.data;
          if (code === 0) {
            this.$message({
              message,
              type: "success",
            });
          }
        }
      }
      if (this.ifChooseTrain) {
        if (data && data.id) {
          const trainingData = this.trainingData.map((obj) => {
            return { personnelId: data.id, userName: data.userName, ...obj };
          });
          const trainInfoRes = await addTraining(trainingData);
          const { code, message } = trainInfoRes?.data;
          if (code === 0) {
            this.$message({
              message,
              type: "success",
            });
          }
        }
      }
      if (this.ifChooseWork) {
        if (data && data.id) {
          const workData = this.workData.map((obj) => {
            return { personnelId: data.id, userName: data.userName, ...obj };
          });
          const workInfoRes = await addWork(workData);
          const { code, message } = workInfoRes?.data;
          if (code === 0) {
            this.$message({
              message,
              type: "success",
            });
          }
        }
      }
      window.location.reload();
    },
    onSubmit() {
      this.$refs["baseInfoForm"].validate((valid) => {
        if (valid) {
          if (this.ifChooseEdu && this.educateData.length === 0) {
            this.$message.error("教育经历校验未通过，请至少填写一条信息！");
            return;
          }
          if (this.ifChooseTrain && this.trainingData.length === 0) {
            this.$message.error("培训经历校验未通过，请至少填写一条信息！");
            return;
          }
          if (this.ifChooseWork && this.workData.length === 0) {
            this.$message.error("工作经历校验未通过，请至少填写一条信息！");
            return;
          }
          if (this.ifChooseDoc && this.docData.length === 0) {
            this.$message.error("文档信息校验未通过，请至少填写一条信息！");
            return;
          }
          if (this.ifChooseAvatar && this.avatarData.length === 0) {
            this.$message.error("头像/签名校验未通过，请至少填写一条信息！");
            return;
          }
          this.handleSubmit();
        } else {
          this.$message.error("基本信息校验未通过，请检查内容!");
        }
      });
    },
    handleDataFromEducate(data) {
      this.educateData = data;
    },
    handleDataFromTraining(data) {
      this.trainingData = data;
    },
    handleDataFromWork(data) {
      this.workData = data;
    },
  },
};
</script>
<style lang="less" scoped>
.mb-10 {
  margin-bottom: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.checkbox-title {
  line-height: 36px;
}
</style>